<template>
  <div class="advertising">
    <div class="title">内容管理-广告管理</div>
    <div class="UserAg_bg">
      <div class="box">
        <div class="UserAg_btn">
          <div
            v-for="(item,index) in btnlist"
            :key="index"
            @click="doClick(index)"
            :class="{active:item.isActive}"
          >{{item.name}}</div>
        </div>
        <div class="icon_font">
          <div class="el-icon-circle-plus-outline" @click.prevent="addRow()"></div>
          <div class="el-icon-delete" @click.prevent="delData()"></div>
        </div>
      </div>

      <!--table内容   人才、企业、公共-->
      <div class="table" v-show="isTable==true">
        <el-table
          :header-cell-style="{background:'rgba(247,249,252,.5)',color:'#1F2E4D',}"
          class="tabheader"
          :data="tableData"
          @selection-change="selectRow"
          style="width: 100%"
        >
          <el-table-column type="selection" width="45"></el-table-column>
          <el-table-column align="center" prop="id" label="广告位置" min-width="220">
            <template slot-scope="scope">
              <div class v-if="scope.row.id != index">{{options[scope.row.typeId - size].label}}</div>
              <div class="select" v-if="scope.row.id == index">
                <el-select v-model="scope.row.typeId" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title" label="广告标题" min-width="200">
            <template slot-scope="scope">
              <div class v-if="scope.row.id != index">{{scope.row.content.title}}</div>
              <input
                type="text"
                class="inp1"
                v-model="scope.row.content.title"
                v-if="scope.row.id == index"
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="img" label="广告图片" min-width="160">
            <template slot-scope="scope">
              <div class="tabImg">
                <el-upload
                  v-if="scope.row.id == index"
                  class="avatar-uploader"
                  ref="upload"
                  action="/projectName/company/getPicAddress.do"
                  :show-file-list="false"
                  :auto-upload="false"
                  :on-change="changHandle"
                >
                  <img v-if="scope.row.content.image" :src="scope.row.content.image" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <img v-if="scope.row.id != index" :src="scope.row.content.image" class="avatar">
              </div>
            </template>
          </el-table-column>
          <el-table-column label="格式" min-width="160" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.typeId === 6 || scope.row.typeId === 7">280px*210px</span>
              <span v-else-if="scope.row.typeId === 5">1920px*360px</span>
              <span v-else>1920px*550px</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="Outside" label="外链地址" min-width="200">
            <template slot-scope="scope">
              <div class="Outside" v-if="scope.row.id!=index">{{scope.row.content.url}}</div>
              <input
                type="text"
                v-model="scope.row.content.url"
                class="inp"
                v-if="scope.row.id == index"
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div @click="handleEdit(scope.row)" style="color:#3377ff">{{scope.row.msg}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--table内容   入驻企业管理-->
      <div class="table" v-show="isTable==false">
        <el-table
          :header-cell-style="{background:'rgba(247,249,252,.5)',color:'#1F2E4D',}"
          class="tabheader"
          @selection-change="selectRow"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" label="序号" type="index" min-width="110"></el-table-column>
          <el-table-column align="center" prop="Advertising" label="入驻企业名称" min-width="250">
            <template slot-scope="scope">
              <div class v-if="scope.row.id != index">{{scope.row.content.title}}</div>
              <input
                type="text"
                class="inp1"
                v-model="scope.row.content.title"
                v-if="scope.row.id == index"
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="img" label="企业logo" min-width="250">
            <template slot-scope="scope">
              <div class="tabImg">
                <el-upload
                  v-if="scope.row.id == index"
                  class="avatar-uploader"
                  ref="upload"
                  action="/projectName/company/getPicAddress.do"
                  :show-file-list="false"
                  :auto-upload="false"
                  :on-change="changHandle"
                >
                  <img v-if="scope.row.content.image" :src="scope.row.content.image" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <img v-if="scope.row.id != index" :src="scope.row.content.image" class="avatar">
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="格式">
            <template>224px*100px</template>
          </el-table-column>
          <el-table-column align="center" prop="title" label="排序" min-width="180">
            <template slot-scope="scope">
              <div class v-if="scope.row.id != index">{{scope.row.num}}</div>
              <input v-if="scope.row.id == index" type="text" v-model="scope.row.num" class="linp">
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div @click="handleEdit(scope.row)" style="color:#3377ff">{{scope.row.msg}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'advertising',
  data() {
    return {
      index: -1,
      row: null,
      size: 0,
      btnlist: [
        { name: '人才端广告管理', isActive: true },
        { name: '企业端广告管理', isActive: false },
        { name: '公共广告管理', isActive: false },
        { name: '入驻企业管理', isActive: false }
      ],
      tableData: [],
      tableCom: [],
      isTable: false,
      msg: '编辑', //入驻企业管理  用户勾选后按钮改为“编辑”
      options: [],
      value: '',
      isShow: false,
      isShow0: false,
      data: {},
      content: {},
      selectlistRow: [],
      states: '',
      ids: [],
      obj: null
    }
  },
  methods: {
    doClick(obj) {
      this.tableData = []
      this.options.length = 0
      this.ids = []
      this.obj = obj
      this.btnlist.forEach(item => {
        item.isActive = false
      })

      this.btnlist[obj].isActive = true
      if (obj == 0) {
        this.size = 4
        this.states = '4,5,6,7'
        this.options.push({ value: 4, label: '人才端首页顶部banner' })
        this.options.push({ value: 5, label: '人才端职位顶部banner' })
        this.options.push({ value: 6, label: '人才端右侧广告位' })
        this.options.push({ value: 7, label: '人才端已投递右侧广告位' })
        this.isTable = true
      } else if (obj == 1) {
        this.size = 8
        this.states = '8'
        this.options.push({ value: 8, label: '企业端入口顶部banner' })
        this.isTable = true
      } else if (obj == 2) {
        this.size = 47
        this.states = '47'
        this.options.push({ value: 47, label: 'HOME页顶部banner' })
        this.isTable = true
      } else if (obj == 3) {
        this.states = '9'
        this.size = 9
        this.options.push({ value: 9, label: '人才端首页顶部banner' })
        this.isTable = false
      }

      this.lAxios({
        method: 'post',
        url: '/platform/selectStaticData.do',
        params: {
          state: this.states
        }
      }).then(res => {
        if (res.data.status == 0) {
          let data = res.data.data
          var statesSpl = this.states.split(',')
          console.log(statesSpl[0])
          statesSpl.forEach(state => {
            //拿到每一行数据
            let rows = data[state + '']
            rows.forEach(row => {
              let content = JSON.parse(row.content)
              this.tableData.push({
                id: row.id,
                num: row.num,
                typeId: row.typeId,
                content: content,
                msg: '编辑'
              })
            })
          })
          console.log(this.tableData)
        }
      })
    },
    check(row) {
      row.title = row.title.trim()
      row.url = row.url.trim()
      if (row.title == '') {
        return this.states == '9' ? '请输入入驻企业名称!' : '请输入广告标题!'
      }
      if (row.image == '') {
        return this.states == '9' ? '请输入入驻企业logo!' : '请选择广告图片!'
      }
      if (row.url == '' && this.states != '9') {
        return '请输入外链地址!'
      }
      return ''
    },
    handleEdit(row) {
      if (row.msg == '编辑') {
        this.row = row
        this.index = row.id
        row.msg = '确定'
      } else if ((row.msg = '确定')) {
        let result = this.check(row.content)
        if (result != '') {
          this.$message.warning(result)
          return
        }
        this.row = null
        let url =
          row.id < 0
            ? '/platform/addStaticData.do'
            : '/platform/updateStaticData.do'
        let json = JSON.stringify(row.content)
        this.lAxios({
          method: 'post',
          url: url,
          params: {
            id: row.id,
            content: json,
            typeId: row.typeId,
            num: row.num
          }
        }).then(res => {
          if (res.data.status == 0) {
            this.doClick(this.obj)
            this.$message.success('操作成功!')
          } else {
            this.$message.error('操作失败!')
          }
        })
        this.index = -1
        row.msg = '编辑'
      }
    },
    changHandle(file) {
      console.log(this.row)
      var data = new FormData()
      data.append('file', file.raw)
      this.lAxios({
        method: 'post',
        url: '/platform/getPicAddress.do',
        data,
        headers: { 'Content-Type': false }
      }).then(res => {
        if (res.data.status == 0) {
          this.row.content.image = res.data.data
        }
      })
    },
    // 增加行
    addRow() {
      let flag = false
      this.tableData.forEach(table => {
        if (table.id < 0) {
          flag = true
        }
      })
      if (flag) {
        this.$message.warning('请先完成新增操作!')
      } else {
        let id = new Date().getTime()
        this.tableData.push({
          id: -id,
          typeId: this.size,
          content: { image: '', url: '', title: '' },
          msg: '编辑'
        })
      }
    },
    // 删除方法
    // 删除选中行
    delData() {
      this.selectlistRow.forEach(row => {
        this.ids.push(row.id)
      })
      console.log(this.ids.length)
      if (this.ids.length > 0) {
        this.lAxios({
          method: 'post',
          url: '/platform/deleteStaticData.do',
          params: {
            ids: this.ids.join(',')
          }
        }).then(res => {
          if (res.data.status == 0) {
            this.$message.success('删除成功!')
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
      //清除删除行
      this.selectlistRow.forEach(val => {
        this.tableData.forEach((row, i) => {
          if (row.id === val.id) {
            // i 为选中的索引
            this.tableData.splice(i, 1)
          }
        })
      })
    },
    //table事件
    selectRow(val) {
      this.selectlistRow = val
    }
  },
  created() {
    this.doClick(0)
  }
}
</script>

<style  lang="scss" scoped>
.advertising {
  width: 99%;
  height: 100vh;
  margin-left: 1%;
  background-color: #f7f9fc;
  font-size: 12px;
}
.title {
  height: 33px;
  line-height: 33px;
}
.UserAg_bg {
  width: 100%;
  min-height: 600px;
  background-color: white;
  padding: 0 0 20px 0;
}
.UserAg_btn {
  display: flex;
  flex-direction: row;
  margin-left: 48px;
  padding-top: 29px;
  color: #333;
  cursor: default;
}
.UserAg_btn > div {
  width: 162px;
  height: 50px;
  font-size: 14px;
  border: 1px solid #f7f7f7;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  margin-right: 42px;
}
.UserAg_btn > div:nth-child(1) {
  margin-right: 57px;
}
.active {
  background-color: #3377ff;
  color: white;
}
.icon_font {
  font-size: 22px;
  padding-top: 39px;
}
.icon_font > div:nth-child(1) {
  /*color: #199ed8;*/
  margin-right: 30px;
}
.box {
  display: flex;
  flex-direction: row;
}
.table {
  width: 96%;
  margin: 0 auto;
  border-top: 1px solid #f7f7f7;
  margin-top: 27px;
}
.tabImg {
  // width: 125px;
  height: 37px;
  overflow: hidden;
  img {
    width: 100%;
  }
}
.Outside {
  color: #3377ff;
}
.tableBtn {
  width: 140px;
  height: 39px;
  font-size: 14px;
  color: #3377ff;
}
.linp {
  width: 25px;
  height: 25px;
  text-align: center;
}
.inp {
  width: 180px;
  height: 40px;
  padding-left: 10px;
  border: 1px solid #d3dbeb;
  border-radius: 5px;
}
.inp1 {
  width: 180px;
  height: 40px;
  padding-left: 10px;
  border: 1px solid #d3dbeb;
  border-radius: 5px;
}
.select {
  // width: 180px;
  height: 40px;
  /*border: 1px solid #D3DBEB;*/
  /*border-radius: 5px;*/
  /*box-sizing: border-box;*/
}
</style>
